<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
</head>

<body>
    <div id="app">
        <h1>{{web.title}}</h1>
        <h2>{{web.url}}</h2>
        {{msg}} : {{number}}
        <br />
        <!-- 使用 v-on: 绑定事件 -->
        <button v-on:click="editWebUrl">修改网址</button>
        <!-- @ 是 v-on: 的简写形式 -->
        <button @click="editWebUrl">修改网址-简写形式</button>
        <br />
        <!-- 按键修饰符 -->
        <!-- keyup 松开按键时触发 keydown 按下按键时触发-->
        回车 : + 1<input type="text" @keyup.enter="plusNumber(1)"><br />
        空格 : + 2<input type="text" @keyup.space="plusNumber(2)"><br />
        <!-- 按下Tab键后输入框将失去焦点，这个输入框将无法再监听到Tab的keyup事件，因此这里使用keydown -->
        Tab : + 3<input type="text" @keydown.tab="plusNumber(3)"><br />
        w : + 4<input type="text" @keyup.w="plusNumber(4)"><br />
        <!-- 组合键 -->
        Ctrl+Enter : + 5<input type="text" @keyup.ctrl.enter="plusNumber(5)"><br />
        Ctrl+A : + 6<input type="text" @keyup.ctrl.a="plusNumber(6)"><br />

        <h3>推荐查看: https://cn.vuejs.org/guide/essentials/event-handling.html</h3>
    </div>
    <script type="module">
        import { createApp, ref, reactive } from "../00-dependency/vue.esm-browser.js"
        createApp({

            setup() {
                // 函数同样需要在 setup 中定义并返回
                const editWebUrl = () => {
                    if (web.url === "dcsgo.com.cn") {
                        web.url = "www.dcsgo.com.cn"
                    } else {
                        web.url = "dcsgo.com.cn"
                    }
                }
                const plusNumber = (n) => {
                    number.value += n
                }
                const web = reactive({
                    title: "Dcsgo",
                    url: "dcsgo.com.cn"
                })
                const number = ref(0)
                return {
                    msg: "Hello Vue3",
                    web,
                    number,
                    editWebUrl,
                    plusNumber
                }
            }
        }).mount("#app")
    </script>
</body>

</html>